<template>
  <div v-if="visible">
    <el-dialog
      v-el-drag-dialog
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      append-to-body
      :visible.sync="visible"
      top="10vh"
      title="选择查询条件"
      @close="closeDialog"
      width='800px'
    >
      <table-box ref="reference" :has-default-search="false" :table-height="400" :table-config="tableConfig" :showCustomSetting="false" @row-dblclick="doubleClick" @row-click="handleCurrentChange">
        <el-table-column type="index" slot="before"></el-table-column>
        <el-table-column label="收藏" width="80" column-type="hidden">
          <template slot-scope="scope">
            <div>
              <!-- {{ scope.row.isCollect }} -->
              <i class="el-icon-star-on star-style" :class="{'star-style-sctive':scope.row.isCollect === 1}" @click="handleCollect(scope.row)" />
              <i class="el-icon-delete btn-del"  @click="handleDelete(scope.row)"></i>
            </div>
          </template>
          <!-- <el-table-column prop="role3" label="收藏" /> -->
        </el-table-column>
      </table-box>
      <!-- 分页 -->
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button type="primary" size="small" @click="retreat">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { toFormData } from "./util";
import { chooseSearchData, queryConditions , deleteConditions} from "./apis/table.data.js";
import drag from '../../directives/el-drag-dialog/drag'
export default {
  components: {
  },
  directives:{
    'el-drag-dialog':drag
  },
  props: {
    show: {
      type: Boolean,
      default:false
    },
    /*表格索引*/
    tabIndex:{
      type:[String,Number],
      default:0
    },
  },
  data() {
    return {
      visible: this.show,
      tableConfig: {
          interfacePath: `/ucenter/api/v2/userQueryCondition/collect/page?menuCode=${this.$route.query.menuCode}&tabIndex=${this.tabIndex}`,
          onlySearchBar:true,
          setting: [
            {
              prop: 'filterDescribe',
              label: '描述'
            },
            {
              prop: 'createTime',
              label: '创建时间',
              type:'date'
            }
          ]
        },
        currentRow: null // 选中表格行数
    };
  },
  watch: {
    show: {
      handler: function(val) {
        this.visible = Boolean(val);
      }
    }
  },
  mounted() {},
  methods: {
    closeDialog(val) {
      this.$nextTick(() => {
        this.$emit("update:show", false);
      });
    },
    retreat() {
      this.$nextTick(() => {
        this.$emit("chooseSdata", this.currentRow);
        this.$emit("update:show", false);
      });
    },
    handleCollect(val) {
      const isCollect=val.isCollect === 1 ? 0 : 1
      queryConditions(val.queryId, isCollect).then(res => {
        this.$message({
          message: res.msg === "" ? "操作成功" : res.msg,
          type: "success"
        });
        this.$refs.reference.initTableData()
      });
    },
    handleDelete(row) {
      deleteConditions(row.queryId).then(res => {
        this.$message({
          message: res.msg === "" ? "操作成功" : res.msg,
          type: "success"
        });
        this.$refs.reference.initTableData()
      });
    },
    doubleClick(val) {
      this.currentRow = val;
      this.retreat();
    },
        // 选中表格行数
    handleCurrentChange(val) {
      this.currentRow = val.row;
    },
  }
};
</script>

<style lang="scss" scoped>
@import "../../../theme/qup-theme";
.choose-inner {
  width: 370px;
}
.star-style {
  color: #a6a6a6;
  font-size: 20px;
  cursor: pointer;
}
.star-style-sctive {
  color: #ff7c30;
}
.btn-del {
  margin-left: 15px;
  color: #a6a6a6;
  font-size:16px;
  cursor: pointer;
}

.el-button--primary {
  color: #FFF;
  background-color: $qup-color-primary ;
  border-color: $qup-color-primary ;
}
/deep/ .function-box .btn-box{
  display: none;
}
</style>

